<!DOCTYPE html>
<html class="x-admin-sm">
    <head>
        <meta charset="UTF-8">
        <title>欢迎页面-X-admin2.2</title>
        <meta name="renderer" content="webkit">
        <!-- <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> -->
        <meta name="viewport" content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />
        <link rel="stylesheet" href="./css/font.css">
        <link rel="stylesheet" href="./css/xadmin.css">
        <link rel="stylesheet" th:href="@{bower_components/bootstrap/dist/css/bootstrap.min.css}">
        <script src="./lib/layui/layui.js" charset="utf-8"></script>
        <script type="text/javascript" src="./js/xadmin.js"></script>
    </head>
    
    <body>
       
        <div class="layui-fluid">
            <div class="layui-row layui-col-space15">
                <div class="layui-col-md12">
                    <div class="layui-card">
                        <div class="layui-card-body ">

                                <div class="layui-input-inline layui-show-xs-block">
                                    <input id="search" type="text" name="username" placeholder="请输入用户名" autocomplete="off" class="layui-input"></div>
                                <div class="layui-input-inline layui-show-xs-block">
                                    <button class="layui-btn" onclick="doGetObjects()" lay-filter="sreach">
                                        <i class="layui-icon">&#xe615;</i></button>
                                </div>
                        </div>
                        <div class="layui-card-header">
                            <button class="layui-btn layui-btn-danger" onclick="doDeleleObjects()">
                                <i class="layui-icon"></i>删除</button>
                            </div>
                        <div class="box-body table-responsive no-padding">
                            <table class="table table-hover" border="1px solid">
                                <thead>
                                    <tr  v-for="item in userarr">
										<th width="25"><input type="checkbox" id="checkAll"></th>
										<th width="80">用户名</th>
										<th width="100">操作</th>
										<th>请求方法</th>
										<th width="17%">请求参数</th>
										<th width="120">客户端IP</th>
										<th width="250">执行时长</th>
									</tr>
                                </thead>
                                <tbody  class="text-d">
                                    <tr>
                                    	
									</tr>
                                </tbody>
                            </table>
                        <div class="layui-card-body ">
                         <div id="pageId" class="page" th:include="page.html :: pageFragement">
                       </div>
                    </div>
                </div>
            </div>
        </div>          
</body>
<script type="text/javascript">
$(function(){	
	  /*  $(".pageId").load("doPageUI",function(){//资源加载完成执行
		   doGetObjects();//异步加载日志信息
	   });   */
	doGetObjects();
    //$("#checkAll").change(doChangeTBodyCheckBoxState);
     $("#checkAll").change(doChangeTBodyCheckBoxState);
	$(".text-d")
	  .on("change","input:checkbox",doChangeTHeadCheckBoxState);
})
  //处理tbody中checkbox对象的事件
   function doChangeTHeadCheckBoxState(){
	  //1.定义一个初始状态，默认值true.
	  var flag=true;
	  //2.获得所有tbody中的checkbox对象并与flag变量的初始状态进行逻辑与操作
	  $(".text-d input:checkbox")
	  .each(function(){
		  flag=flag&&$(this).prop("checked");
	  });
	  //3.修改thead中checkbox状态
	  $("#checkAll").prop("checked",flag);
   }
 function doChangeTBodyCheckBoxState(){
	   //1.获得head中checkbox对象的状态
	   var flag=$(this).prop("checked");
	   //2.修改tbody中checkbox对象状态
	   $(".text-d input:checkbox").prop("checked",flag);
   }
function doDeleleObjects(){
	 var idArray=doGetCheckedIds();//通过此函数返回一个数组，数组中存储的是选中的记录id
	   if(idArray.length==0){
		   alert("请先选择");
		   return;
	   }
	   if(!confirm("确认删除吗"))return;
	   //2.并构建参数对象
	   var params={"ids":idArray.toString()};//[1,2,3]-->1,2,3
	   //3.定义删除操作的url
	   const url="log/doDeleteObjects";
	   //4.发送异步请求执行删除操作，并刷新页s面
	   $.post(url,params,doHandleDeleteResult)
	   $("#checkAll").prop("checked",false);
	   
}
function doHandleDeleteResult(result){
	   if(result.state==1){
		   alert(result.message);
		   //doGetObjects();//刷新
		   doRefreshAfterDeleteOK();
	   }else{
		   alert(result.message);
	   }
}
function doRefreshAfterDeleteOK(){
	   var checkAll=$("#checkAll").prop("checked");
	   var pageCurrent=$("#pageId").data("pageCurrent");
	   var pageCount=$("#pageId").data("pageCount")
	   if(checkAll&&pageCurrent==pageCount&&pageCount>1){
		   pageCurrent--;
		   $("#pageId").data("pageCurrent",pageCurrent);
	   }
	   doGetObjects();
}
function doGetCheckedIds(){
	   //1.定义数组
	   var idArray=[];
	   //2.迭代所有选中的checkbox对象，并获取value属性的值，然后存储到数组
	   $(".text-d input:checkbox:checked")
	   .each(function(){
		   idArray.push($(this).val());
	   });
	   //3.返回数组
	   return idArray;
}
//异步加载日志数据
function doGetObjects(){
	   //1.定义请求参数
	   //这个值最初是在page.html中进行了绑定
	   var pageCurrent=$("#pageId").data("pageCurrent");//data(key)表示获取值
	   if(!pageCurrent)pageCurrent=1;
	   var uname=$("#search").val();
	   //var params="pageCurrent="+pageCurrent;//{"pageCurrent":1}
	   var params={"pageCurrent":pageCurrent}
	   //2.定义请求url
	   var url="log/doFindPageObjects";
	   if(uname)params.username=uname;
	   //3.发送异步请求加载数据，并处理响应结果
	   $.getJSON(url,params,function(result){//result-->JsonResult
		   //console.log(result);//json 格式的javascript对象
		  // debugger
		   
	       doHandleResponseResult(result);//处理响应结果
	   })
}
//处理服务端响应结果
function doHandleResponseResult(result){//jsonResult
	   if(result.state==1){
		   //1.将数据显示在table的tbody位置
		   doSetTableBodyRows(result.data.records);//result.data-->pageObject
		   //2.在pageId位置显示分页信息
		   doSetPagination(result.data);//pageObject
	   }else{
		  // alert(result.message);//服务端的异常
		   doSetErrorMsg(result.message);
	   }
}
//将服务器端返回的日志信息呈现在table的tbody位置。
function doSetTableBodyRows(records){
	   //1.获得tbody对象，并清空内容
	   var tBody=$(".text-d");
	   tBody.empty();//清空
	   
	   //2.迭代日志记录，将所有的记录追加到tbody中
	   for(var i=0;i<records.length;i++){
		   //2.1构建tr对象
		   var tr=$("<tr></tr>");
		   //2.2构建多个td对象
		   var tds=doCreateTds(records[i]);
		   //2.3将tds追加到tr
		   tr.append(tds);
		   //2.4将tr追加到tbody
		   tBody.append(tr);
		   }
}
function doCreateTds(record){
	
	 var tds="<td><input type='checkbox' class='cBox' name='cItem' value='"+record.id+"'></td>"+
     "<td>"+record.username+"</td>"+
     "<td>"+record.operation+"</td>"+
     "<td>"+record.method+"</td>"+
     "<td>"+record.params+"</td>"+
     "<td>"+record.ip+"</td>"+
     "<td>"+record.time+"</td>";          
	return tds;
	}
</script> 
</html>